<template>
    <div class='ylqxsczlgf'>
        <el-input type="text"  v-if="jurisdiction.searchMaaiProByCondition"  v-model="searchVal" auto-complete="off" placeholder="搜索" class="serch-parent"></el-input>
        <el-button class="slot-btn-top" v-if="jurisdiction.searchMaaiProByCondition" type="primary" size="small" @click="searchData">查询</el-button>
        <el-button class="slot-btn-top" v-if="jurisdiction.insertMaaiProduction" type="primary" size="small" @click="AddData">新增</el-button>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  stripe
                  border
                  class="user-table"
                  :height="tableHeight"
                  style="width: 100%;"
                  :header-cell-style="getRowClass"
        >
            <el-table-column
                    fixed
                    type="index"
                    label="*"
                    sortable
                    align="center"
                    width="40">
            </el-table-column>
            <el-table-column
                    prop="nums"
                    label="条款编号"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="inputperson"
                    label="填写人"
                    sortable
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="inputtime"
                    label="填写时间"
                    sortable
                    :formatter="formatTimestampToTime"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="textcontent"
                    label="条款内容"
                    sortable
                    width="1080">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    sortable
                    align="right"
                    width="90">
                <template slot-scope="scope">
                    <el-button @click="EditData(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button v-if="jurisdiction.delMaaiProduction" @click="DelData(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10, 15,20, 25,30,50, 100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
        </el-pagination>

        <el-dialog :title="dialogTitle" :visible.sync="isDialog" :model="dialogList" :close-on-click-modal="false">
            <el-form label-position="right" label-width="80px" :model="dialogList">
                <el-form-item label="条款编号">
                    <el-input v-model="dialogList.nums" clearable></el-input>
                </el-form-item>
                <el-form-item label="填写人">
                    <el-input v-model="dialogList.inputperson" disabled></el-input>
                </el-form-item>
                <el-form-item label="填写时间">
                    <el-input v-model="dialogList.inputtime" disabled></el-input>
                </el-form-item>
                <el-form-item label="条款内容">
                    <quill-editor v-model="dialogList.textcontent" style='height: 490px;'></quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer"  >
                <el-button type="primary" v-if="jurisdiction.updateMaaiProduction" @click="submitDialogList">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import {quillEditor} from 'vue-quill-editor';

    export default {
        name: 'principleForm',
        components: {quillEditor},
        data() {
            let hash = window.location.hash;
            let params = hash.substr(hash.lastIndexOf('/') + 1);
            let token = sessionStorage.getItem("tokenId");
            let menuId = sessionStorage.getItem('menuId');
            debugger;
            return {
                tableData: [],
                newTableData: [],
                jurisdiction: {
                    insertMaaiProduction: true,
                    delMaaiProduction: true,
                    updateMaaiProduction: true,
                    searchMaaiProByCondition: true,
                    queryMaaiProduction: true
                },
                params: params,
                tokenId: token,
                menuId: menuId,
                currentPage: 1,
                pagesize: 10,
                tableHeight: document.documentElement.clientHeight - 180,
                isDialog: false,
                dialogTitle: '',
                searchVal: '',
                dialogList: {
                    id: '',
                    nums: '',
                    inputperson: '',
                    inputtime: '',
                    orgid: '',
                    textcontent: ''
                }
            }
        },
        created() {
            this.getData();
            this.getJurisdiction();
        },
        mounted() {
            let that = this;
            window.onresize = () => {
                return (() => {
                    window.tableHeight = document.documentElement.clientHeight;
                    that.tableHeight = window.tableHeight - 180
                })()
            }
        },
        watch: {
            tableHeight(val) {
                if (!this.timer) {
                    this.tableHeight = val;
                    this.timer = true;
                    let that = this;
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }
            }
        },
        methods: {
            getData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/zltx/maai_production/queryProduction/' + _this.params + '?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.tableData = res.data.content;
                        _this.$message.success(res.data.desc);
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                    _this.$router.push({path: '/login'});
                })
            },
            getJurisdiction() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/system/menu/getMenuAllSrc/' + _this.menuId + '?tokenId=' + _this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        for (let i = 0; i < res.data.content.length; i++) {
                            let item = res.data.content[i];
                            _this.jurisdiction[item.component] = item.menuShow;
                        }
                        _this.$message.success( res.data.desc );
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                })
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
            },
            getRowClass({row, column, rowIndex, columnIndex}) {
                if (rowIndex == 0) {
                    return 'background:#EFEFEF;color:#000;box-shadow: 2px 0px 0px 2px #999;'
                } else {
                    return ''
                }
            },
            timestampToTime(timestamp) {
                let date = new Date(timestamp);
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                let s = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();
                return Y + M + D + h + m + s;
            },
            formatTimestampToTime(row, column, cellValue, index) {
                return this.timestampToTime(cellValue);
            },
            AddData() {
                let _this = this;
                let timestamp = _this.timestampToTime((new Date()).getTime());
                _this.isDialog = true;
                _this.dialogTitle = '添加';
                this.dialogList = {
                    id: '',
                    nums: '',
                    inputperson: sessionStorage.getItem("username"),
                    inputtime: timestamp,
                    orgid: _this.params,
                    textcontent: ''
                }
            },
            EditData(row) {
                let _this = this;
                _this.isDialog = true;
                _this.dialogTitle = '编辑';
                let timestamp = _this.timestampToTime((new Date()).getTime());
                this.dialogList = {
                    id: row.id,
                    nums: row.nums,
                    inputperson: sessionStorage.getItem("username"),
                    inputtime: timestamp,
                    orgid: _this.params,
                    textcontent: row.textcontent
                }
            },
            DelData(row) {
                let _this = this;
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    _this.dialogTitle = '删除';
                    let timestamp = _this.timestampToTime((new Date()).getTime());
                    _this.dialogList = {
                        id: row.id,
                        nums: row.nums,
                        inputperson: sessionStorage.getItem("username"),
                        inputtime: timestamp,
                        orgid: _this.params,
                        textcontent: row.textcontent
                    };
                    _this.submitDialogList();
                }).catch(() => {
                });
            },
            searchData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/zltx/maai_production/searchAllCondition/' + _this.params + '?tokenId=' + _this.tokenId,
                    method: 'get',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    params: {
                        nums: _this.searchVal
                    }
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.$message.success(res.data.desc);
                        _this.isDialog = false;
                        _this.tableData = res.data.content;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("搜索失败！请重新搜索...");
                })
            },
            submitDialogList() {
                let _this = this;
                let url = _this.dialogTitle === '添加' ? '/api/adscm/zltx/maai_production/insertContent/' + _this.params + '?tokenId=' + _this.tokenId :
                    (_this.dialogTitle === '编辑' ? '/api/adscm/zltx/maai_production/updateContent/' + _this.params + '?tokenId=' + _this.tokenId :
                        _this.dialogTitle === '删除' ? '/api/adscm/zltx/maai_production/deleteContent/' + _this.params + '?tokenId=' + _this.tokenId : '');
                this.$http({
                    url: url,
                    method: 'get',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    params: _this.dialogList
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.$message.success(res.data.desc);
                        _this.isDialog = false;
                        _this.getData();
                    } else {
                        _this.$message.error("失败！请重新提交...");
                    }
                }).catch(function (catchres) {
                    _this.$message.error("失败！请重新提交...");
                })
            }
        }
    }
</script>

<style scope>
    @import "filedChild.css";
</style>
